<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">{{msg}}
        <ul>
            <li v-for="item in [1,2,3,4]"></li>
        </ul>

        <button @click="destroy">死</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#app",
        data:{
            msg:"message from data"
        },
        watch:{
            msg(){
                console.log("watch.msg")
            }
        },
        methods:{
            destroy(){
                this.$destroy()
            }
        },
        //初始化事件&生命周期钩子
        beforeCreate() {
            //只能做一些vue自定义事件相关的操作
            /*this.$on("damu",()=>{console.log("damu fn")});
            this.$emit("damu")*/
        },
        //进行注入(将data中的数据转绑给对应的vm实例对象)&响应式操作
        created(){
            //最早可以发送ajax请求的位置!
        },
        //判断是否具备el这个配置项 或者 是否调用过$mount; 来确定挂载节点
        //判断是否具备template这个配置项 来确定模板;
        //如果有则使用template作为模板;如果没有则使用挂载节点作为模板
        //解析完模板
        beforeMount(){},
        //将解析完的模板覆盖对应的挂载节点
        mounted(){
            // 最早可以实现动效的位置!
            this.timer = setInterval(()=>{
                console.log("setInterval")
                this.msg += "❤"
            },2000)
        },
        //vue初始化结束

        //当vue中的data数据产生改变时
        beforeUpdate() {
            console.log("beforeUpdate")
        },
        updated(){
            console.log("updated")
        },

        //调用$destroy方法
        beforeDestroy(){
            console.log("beforeDestroy")
        },
        destroyed() {
            console.log("destroyed");
            //收尾工作  比如清除定时器
            clearInterval(this.timer)
        }
    })
</script>
</html>